<template>
    <el-card class="box-card header_wrapper">
        <div class="header_container">
            <img src="https://rs.dance365.com/logo@3xrenew3.png" alt="中舞网" style="width: 128px;height: 30px">
            <nav class="header_nav">
                <router-link :class="{active:route.path.includes('/recommend')}" to="/recommend" class="item">资源
                </router-link>
                <router-link :class="{active:route.path.includes('/discovery')}" to="/discovery" class="item">课程
                </router-link>
                <router-link :class="{active:route.path.includes('/training')}" to="/training" class="item">练习室
                </router-link>
                <router-link :class="{active:route.path.includes('/communication')}" to="/communication" class="item">
                    交流
                </router-link>
                <router-link :class="{active:route.path.includes('/center')}" to="/center" class="item">我的</router-link>
            </nav>
            <div style="margin-left: 300px;display: flex;align-items: center">
                <div style="display: flex">
                    <el-icon :size="22" :color="'#111'">
                        <Download/>
                    </el-icon>
                    <a href="https://download.dance365.com/" style="font-size: 16px;color: #111;text-decoration: none">下载APP</a>
                </div>
                        <el-button type="success" round style="margin-left: 30px" icon="Plus">发布</el-button>
                <el-dropdown v-if="userStore.token">
                <el-avatar  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" size="default" style="margin-left: 30px"/>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
                        <el-dropdown-item>登录账号:{{userStore.userinfo.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
                </el-dropdown >
                <el-dropdown v-else>
                    <el-avatar  :icon="UserFilled"  size="default" style="margin-left: 30px"/>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="router.push('/login')">登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </el-card>
</template>

<script setup>
import {useRoute,useRouter} from "vue-router";
import {useUserInfoStore} from "../../store/modules/userInfo.js";
import pinia from "../../store/index.js";
import { UserFilled } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
const userStore = useUserInfoStore(pinia);
const route = useRoute();
const router = useRouter();
console.log(route)
//退出登录的回调
const logOut = async ()=>{
    try {
        try {
            await userStore.reset();
            ElMessage.success("退出登录成功");
            router.push("/login");
        }catch (e) {
            ElMessage.error("退出登录成功")
            return Promise.reject(e.message);
        }
    }catch (e) {
    
    }
}
</script>

<style scoped lang="less">
.header_wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    
    .header_container {
        width: 1200px;
        display: flex;
        align-items: center;
        
        .item {
            text-decoration: none;
            padding: 12px 10px;
            font-size: 18px;
            color: #111;
            margin-left: 35px;
        }
        
        .item:hover {
            color: #f93684;
        }
        
        .active {
            color: #f93684;
        }
    }
}
</style>
